<template>
  <el-container>
    <el-header class="auditor_header">
      大型货物运输线路申请管理平台
    </el-header>
    <el-main class="main_text">
      <div class="main-title1">
        <div>平台数据</div>
        <div class="registerNum">
          <img src="../../../assets/logoAssessor.png" class="img1">
          <div style="width:150px">
            当前系统注册司机人数：
            <li style="list-style:none"><b>{{driverNum}}</b></li>
          </div>
        </div>
        <div class="assessorNum">
          <img src="../../../assets/logoRegister.png" class="img2">
          <div style="width:150px">
            当前系统拥有审核员人数：
            <li style="list-style:none"><b>{{auditorNum}}</b></li>
          </div>
        </div>
        <div class="scaleNum">
          <img src="../../../assets/logoScale.png" class="img3">
          <div style="width:150px">
            <li style="list-style:none">历史路线申报数:</li>
            <li style="list-style:none "><b>{{applyNum}}</b></li>
            <li style="list-style:none">历史申报通过数: </li>
            <li style="list-style:none " ><b>{{passNum}}</b></li>

          </div>
        </div>
      </div>

      <div class="main-title2">
        <div class="chart1">
          <div>历月申报统计量</div>
          <HistogramChart ></HistogramChart>
        </div>
        <div class="chart2">
          <div>热门路线申请</div>
          <PieChart></PieChart>
        </div>
      </div>
    </el-main>

  </el-container>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import PieChart from './pieChart.vue'
import HistogramChart from './histogramChart.vue'
import axios from "axios";
const passNum = ref(0);
const applyNum = ref(0);
const driverNum=ref(0);
const auditorNum=ref(0);
onMounted(()=>{
  axios({
    method: 'post',
    url: '/api/login/getUserNum',
    data: {
      userType: '司机',
    },

  })
      .then((res)=>{
        driverNum.value=res.data.data.userNum
      });
  axios({
    method: 'post',
    url: '/api/login/getUserNum',
    data: {
      userType: '审核员',
    },

  })
      .then((res)=>{
        auditorNum.value=res.data.data.userNum
      });

  axios({
    method: 'get',
    url: '/api/road_apply_logs/getNum',
  })
      .then((res)=>{
        applyNum.value=res.data.data
      });

  axios({
    method: 'get',
    url: '/api/road_apply_logs/getPassNum',

  })
      .then((res)=>{
        passNum.value=res.data.data
      });
})
</script>
<style scoped>
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.main_text{
  height: 590px;
}
.top-title .title {
  display:inline-block;
}
.top-title img{
  width:100px;
  height: 100%;
  display:inline-block;
  float:left;
}
.main_text .main-title1{
  color:rgb(84,188,189);
  margin-top:20px;
  margin-left:50px;
  font-size:25px;
  text-align: left;
  float: left;
  display: inline;
  height: 35%;
}
.main_text .main-title2{
  color:rgb(84,188,189);
  margin-top:20px;
  margin-left:50px;
  font-size:25px;
  text-align: left;
  float: left;
  display: inline;
  width: 90%;
  height: 50%;
}
.main_text .main-title2 .chart1{
  float: left;
  width: 40%;

  margin-right: 100px;
}
.main_text .main-title2 .chart2{
  float: left;
  width: 40%;

}
.main_text .main-title1 .registerNum {
  margin-top:40px;
  /* margin-left:40px; */
  width:280px;
  height:160px;
  border:5px solid rgba(98, 213, 215,0.2);
  font-size:15px;
  float:left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 10px;
  padding-left: 10px;
}
.main_text .main-title1 .assessorNum {
  margin-top:40px;
  /* margin-left:40px; */
  width:280px;
  height:160px;
  border:5px solid rgba(98, 213, 215,0.2);
  font-size:15px;
  float:left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 10px;
  margin-right:150px;
  margin-left:150px;
  padding-left: 10px;
}
.main_text .main-title1 .scaleNum {
  margin-top:40px;
  /* margin-left:40px; */
  width:280px;
  height:160px;
  border:5px solid rgba(98, 213, 215,0.2);
  font-size:15px;
  float:left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 15px;
}
.main_text .main-title1 .registerNum img1{
  float:left;
  height:120px;
  display: inline-block;
}
.main_text .main-title1 .assessorNum img2{
  float:left;
  height:120px;
  display: inline-block;
  margin-right:10px;
}
.main_text .main-title1 .scaleNum img3{
  float:left;
  height:120px;
  display: inline-block;
  margin-right:10px;
}
</style>